Vue 幫我們制定許多常用的 directive 如：v-if, v-show, v-for.. 功能強大，也好奇是怎麼做到的呢？讓我們一起動手來設計自己的 directive 吧！

今天目標：

1. 登入頁在輸入密碼的時候，常常因為輸入法而打錯..希望可以顯示密碼。

Vue custom directive 官方文件

Directive 起手式，幫它命名

import Vue 並使用 directive 來設計，

import Vue from 'vue';

Vue.directive('directiveName', {
  // event hook
});

在 temaplet 上使用：

使用的時候 name 前面要加上前綴：v-

如果使用大 / 小駝峰命名方式轉成用連接號 連接。

<div v-directive-name></div>

這樣就完成建立與使用 directive 囉！

官方範例： auto focus

Vue.directive('focus', {
  // 當绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
})

範例中可以看到物件內有 inserted 字串，這是 directive hook 之一，

inserted 代表，當绑定元素插入到 DOM 的時候，可以說 directive 啟動第一次要做什麼事情。

範例中 inserted 函式 el 參數指的是 directive 所绑定的元素，可以用来直接操作 DOM

如果綁在 input 上面 el 就會是 input

因此 directive 啟動的時候會自動 focus 所綁定的 DOM。

<input v-focus>

打開這 page 就會自動將游標聚焦在 input

Directive Hook

Directive Hook Arguments（函式參數）

除了 el 之外，其他參數都應該是只讀的，盡量不要修改他們。

官網上的更多解釋

一起來測試看看吧 (官網範例)

貼到 main.js 上 try try。

Vue.directive('test', {
    bind: function (el, binding, vnode) {
    var s = JSON.stringify;
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value type: ' + typeof binding.value + '<br>' +
      'value: '      + binding.value + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ');
  }
});

use

<div v-test:ironman.2017="vue"></div>

注意 binding.value 是否因傳入 function 導致 JSON.stringif 後變成 undefined

文章上 example 有調整過囉。

custom directive toggle password

設計 directive 會綁在 password input 上面，

並帶入 checkbox 雙向綁定的 value

因此 bind 與 update 都會觸發

function togglePassword (val) {
  return val ? 'text' : 'password';
}

// custom toggle password
Vue.directive('toggle-password', {
  bind (el, binding) {
    el.type = togglePassword( binding.value );
  },
  update (el, binding) {
    el.type = togglePassword( binding.value );
  }
});

use:

<template>
<!-- 
  2. 在 password input 上面使用 v-toggle-password 帶入 checkbox 的 value
-->
<input
  v-model="password"
  v-toggle-password="togglePassword"
  @keyup.enter="login"
  type="password"
  id="inputPassword"
  class="form-control"
  placeholder="Password" required />
<!-- 1. check box 雙向綁定[布林] -->
<div class="squaredFour" style="margin: 20px 10px;">
  <input
    type="checkbox"
    v-model="togglePassword"
    id="togglePassword" />
  <label for="togglePassword" class="checkbox-icon"></label>
  <label for="togglePassword">顯示密碼</label>
</div>
</template>

<script>
export default {
  data () {
    return {
      togglePassword: false,
    }
  },
}
</script>

github 完整範例：

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。